<template>
<div>
<div class="item" @click="ChangeMessageInput"  v-show="!isshow">
   
    {{text}}
</div> 
 <input ref="inputRef" class="item edit" v-model="ChangeItem" v-show="isshow" @blur="ChangeMessageOnblur"> 
</div>
</template>

<script>
export default {
props:{
    text:{
        type:String,
        default:""
    },
    index:{
        type:Number
    }
},
data(){
    return{
        isshow:false,
        ChangeItem:this.text,
    };
},
methods:{
    ChangeMessageInput(){
        this.isshow=true;
        this.$nextTick(() => {
            this.$refs.inpitRef.focus();
        })

    },
    ChangeMessageOnblur(text,index){
        this.isshow=false;
        this.$emit('change',this.ChangeItem,this.index);
    }
},
}
</script>

<style scoped>
.item {
 width: 200px;
 height: 40px;
 line-height: 40px;
 background: #40b883;
 color: white;
 border-bottom:1px solid #ccc ;
 margin: 0 auto;
 margin-left: 200px;
}
.edit{
    background: white;
    color: black;
}
</style>